<template>
  <div>
    <div class="m-b-20 ovf-hd">
      <div class="fl" v-if="addShow">
        <router-link class="btn-link-large add-btn" to="edit">
          <i class="el-icon-plus"></i>&nbsp;&nbsp;添加任务
        </router-link>
      </div>
      <div class="fr w-200" :class="{'m-l-30':addShow}">
        <el-input placeholder="请输入用户名" v-model="keywords">
          <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-input>
      </div>
    </div>
    <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="selectItem">
      <el-table-column
          type="selection"
          width="50">
      </el-table-column>
      <el-table-column
          label="内容"
          prop="content">
      </el-table-column>
      <el-table-column
          label="创建者"
          prop="creater.username"
          width="150">
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="create_time"
          width="200">
      </el-table-column>
      <el-table-column
          label="状态"
          width="100">
        <template slot-scope="scope">
          <div>
            {{ scope.row.status | status }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="200">
        <template slot-scope="scope">
          <div>
            <span v-if="editShow">
              <router-link :to="{ name: 'categoryEdit', params: { id: scope.row.id }, query: { id: scope.row.id }}">
                <el-button
                    size="small"
                    type="primary">
                编辑
                </el-button>
              </router-link>
            </span>
            <span v-if="deleteShow">
              <el-button size="small" type="danger" @click="confirmDelete(scope.row)">删除</el-button>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pos-rel p-t-20">
      <btnGroup :selectedData="multipleSelection" :type="'category'"></btnGroup>
      <div class="block pages">
        <el-pagination
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :page-size="limit"
            :current-page="currentPage"
            :total="dataCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import btnGroup from '../../Common/btn-group.vue'
  import http from '../../../assets/js/http'
  import _g from '@/assets/js/global'
  import { Button, Input, Table, TableColumn, Pagination } from 'element-ui'
  Vue.use(Button)
  Vue.use(Input)
  Vue.use(Table)
  Vue.use(TableColumn)
  Vue.use(Pagination)

  export default {
    data() {
      return {
        tableData: [],
        dataCount: null,
        currentPage: null,
        keywords: '',
        multipleSelection: [],
        limit: 15
      }
    },
    methods: {
      search() {
        this.$router.push({ path: this.$route.path, query: { keywords: this.keywords, page: 1 }})
      },
      selectItem(val) {
        this.multipleSelection = val
      },
      handleCurrentChange(page) {
        this.$router.push({ path: this.$route.path, query: { keywords: this.keywords, page: page }})
      },
      confirmDelete(item) {
        this.$confirm('确认删除该用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _g.openGlobalLoading()
          this.apiDelete('admin/category/', item.id).then((res) => {
            _g.closeGlobalLoading()
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '删除成功')
              setTimeout(() => {
                _g.shallowRefresh(this.$route.name)
              }, 1500)
            })
          })
        }).catch(() => {
          // catch error
        })
      },
      getAllUser() {
        this.loading = true
        const data = {
          params: {
            keywords: this.keywords,
            page: this.currentPage,
            limit: this.limit
          }
        }
        this.apiGet('admin/category', data).then((res) => {
          if (res.get_param) {
            if (res.get_param.page) {
              this.currentPage = parseInt(res.get_param.page)
            } else {
              this.currentPage = 1
            }
            if (res.get_param.limit) {
              this.limit = parseInt(res.get_param.limit)
            } else {
              this.limit = 15
            }
          }
          this.handelResponse(res, (data) => {
            this.tableData = data.list
            this.dataCount = data.dataCount
            if (data.count) {
              this.dataCount = parseInt(data.count)
            }
          })
        })
      },
      getCurrentPage() {
        let data = this.$route.query
        if (data) {
          if (data.count) {
            this.dataCount = parseInt(data.count)
          }
          if (data.page) {
            this.currentPage = parseInt(data.page)
          } else {
            this.currentPage = 1
          }
          if (data.limit) {
            this.limit = parseInt(data.limit)
          } else {
            this.limit = 15
          }
        }
      },
      getKeywords() {
        let data = this.$route.query
        if (data) {
          if (data.keywords) {
            this.keywords = data.keywords
          } else {
            this.keywords = ''
          }
        }
      },
      init() {
        this.getKeywords()
        this.getCurrentPage()
        this.getAllUser()
      }
    },
    created() {
      this.init()
    },
    computed: {
      addShow() {
        return _g.getHasRule('category-save')
      },
      editShow() {
        return _g.getHasRule('category-update')
      },
      deleteShow() {
        return _g.getHasRule('category-delete')
      }
    },
    watch: {
      '$route' (to, from) {
        this.init()
      }
    },
    components: {
      btnGroup
    },
    mixins: [http]
  }
</script>
